<template>
  <div class="_wz_cent_main _wz_screeningPlanDetails">
    <table cellpadding="0" cellspacing="0" border="0">
      <colgroup>
        <col width="16%">
        <col width="16%">
        <col width="18%">
        <col width="16%">
        <col width="18%">
        <col width="16%">
<!--        <col width="16%">-->
<!--        <col width="16%">-->
      </colgroup>
      <tbody>
      <tr>
        <td style="font-weight: 600;position:relative;" colspan="6">排查计划</td>
      </tr>
      <tr>
        <td style="text-align: center;">计划名称</td>
        <td colspan="2">{{!!selectData.name ? selectData.name : '--'}}</td>
        <td style="text-align: center;">排查类型</td>
        <td colspan="2">{{!!selectData.inspectTypeName ? selectData.inspectTypeName : '--'}}</td>
      </tr>
      <tr>
        <td style="text-align: center;">开始时间</td>
        <td colspan="2">{{!!selectData.startDate ? selectData.startDate : '--'}}</td>
        <td style="text-align: center;">结束时间</td>
        <td colspan="2">{{!!selectData.endDate ? selectData.endDate : '--'}}</td>
      </tr>

<!--      发布人-->
      <template v-if="pageType == 2">
        <tr style="border-top: 2px solid #000;">
          <td style="text-align: center;border-top: 3px solid #515a6e;">序号</td>
          <td style="border-top: 3px solid #515a6e;">排查项</td>
          <td colspan="3" style="border-top: 3px solid #515a6e;">排查人员</td>
          <td style="border-top: 3px solid #515a6e;">操作</td>
        </tr>
        <template v-for="item,index in riskPlanPositionsList">
          <tr>
            <td style="text-align: center;"><Tag color="blue">{{index+1}}</Tag></td>
            <td>{{item.riskPositionName}}</td>
            <td colspan="3">{{item.riskInspectUserNames}}</td>
            <td style="text-align: center;font-size: 12px;color: #2d8cf0;cursor: pointer;">
              <span @click="riskPointFun(item)">查看</span>
            </td>
          </tr>
        </template>
      </template>


<!--      执行人-->
      <template v-if="pageType == 1">
        <tr style="border-top: 2px solid #000;">
          <td style="text-align: center;border-top: 3px solid #515a6e;">序号</td>
          <td colspan="4" style="border-top: 3px solid #515a6e;">排查点</td>
          <td style="border-top: 3px solid #515a6e;">操作</td>
        </tr>
        <template v-for="item,index in riskPlanPositionsList">
          <tr>
            <td style="text-align: center;"><Tag color="blue">{{index+1}}</Tag></td>
            <td colspan="4">{{item.riskPositionName}}</td>
            <td style="text-align: center;font-size: 12px;color: #2d8cf0;cursor: pointer;">
              <span @click="riskPointFun(item)">查看</span>

              <template v-if="(new Date(selectData.startDate).getTime() < new Date().getTime()) && (new Date().getTime() < new Date(selectData.endDate).getTime())">
                <Divider type="vertical" />
                <span @click="performHiddenTrouble(item)">执行</span>
              </template>
            </td>
          </tr>
        </template>
      </template>
      </tbody>
    </table>


    <Modal title="隐患项" v-model="formOperation" width="800" :mask-closable="false" :footer-hide="true" >
      <div v-if="formOperation" class="_wz_screeningPlanDetails">
        <table cellpadding="0" cellspacing="0" border="0">
          <colgroup>
            <col width="6%">
            <col width="14%">
            <col width="16%">
            <col width="14%">
            <col width="16%">
            <col width="14%">
            <col width="16%">
          </colgroup>
          <tbody>

          <template v-for="item,index in riskPositionItemList">
            <tr>
              <td rowspan="3" style="border-top: 3px solid #515a6e;"><Tag color="blue">{{index+1}}</Tag></td>
              <td style="border-top: 3px solid #515a6e;">隐患项目</td>
              <td style="border-top: 3px solid #515a6e;" colspan="5">
                {{!!item.riskItemName?item.riskItemName:'--'}}
                <span style="cursor: pointer;color: #2d8cf0;" @click="selectData = item;formOperation = true;" v-if="!!item.riskState">查看</span>
              </td>
            </tr>
<!--            <tr>-->
<!--              <td style="border-top: 3px solid #515a6e;">排查结果</td>-->
<!--              <td colspan="2" style="border-top: 3px solid #515a6e;">-->
<!--                <Tag color="primary" v-if="item.riskState == 1">无隐患</Tag>-->
<!--                <Tag color="warning" v-else-if="item.riskState == 2">有隐患</Tag>-->
<!--                <Tag color="success" v-else-if="item.riskState == 3">已处理</Tag>-->
<!--                <Tag color="warning" v-else>未排查</Tag>-->
<!--              </td>-->
<!--              <td style="border-top: 3px solid #515a6e;">排查状态</td>-->
<!--              <td colspan="2" style="border-top: 3px solid #515a6e;">-->
<!--                <Tag color="primary" v-if="item.finishState">已排查</Tag>-->
<!--                <Tag color="warning" v-else>未排查</Tag>-->
<!--              </td>-->
<!--            </tr>-->
            <tr>
              <td>失控表现</td>
              <td colspan="5">{{!!item.riskItemPerformance?item.riskItemPerformance:'--'}}</td>
            </tr>
            <tr>
              <td>管控措施</td>
              <td colspan="5">{{!!item.riskItemMeasures?item.riskItemMeasures:'--'}}</td>
            </tr>
          </template>
          </tbody>
        </table>
      </div>
    </Modal>
  </div>
</template>
<script>
export default {
  //pageType  1 执行计划    2 排查计划
  props: ['selectData','pageType'],//接收来自父组件的数据
  data() {
    return {
      riskPlanPositionsList:[],//排查点
      riskPositionItemList:[],//隐患项
      formOperation:false,
    }
  },
  computed: {//计算属性

  },
  beforeCreate() {//beforeCreate创建前状态

  },
  created() {//created创建完毕状态

  },
  beforeMount() {//beforeMount挂载前状态   DOM 元素然后塞入页面的过程

  },
  mounted() {//mounted 挂载结束状态

    var that = this;
    let url = that.pageType == 1 ? '/safety/risk/riskPlanPositionsInspectList' : '/safety/risk/riskPlanPositionsList'

    that.axios.post(that.apiUrl.webApi + url, {planUuid:that.selectData.uuid}).then(res => {
      if (!!res) {
        that.riskPlanPositionsList = res.data.data;
      }
    }).catch(err => {
      console.log('失败', err);
    })

  },
  methods: {//执行的方法
    riskPointFun(data){
      let that = this;
      that.axios.post(that.apiUrl.webApi + '/safety/risk/riskPositionItemList', {riskPositionUuid:data.riskPositionUuid}).then(res => {
        if (!!res) {
          that.riskPositionItemList = res.data.data;
          that.formOperation = true;
        }
      }).catch(err => {
        console.log('失败', err);
      })
    },
    //执行
    performHiddenTrouble(data){
      let that = this;
      var obj = JSON.parse(JSON.stringify(data))
      obj.jhUuid = that.selectData.uuid;
      this.$emit("hiddenPerils", obj)

    }

  },
  watch: {//监听

  },
  beforeUpdate() {//beforeUpdate 更新前状态

  },
  updated() {//updated 更新完成状态

  },
  beforeDestroy() {//beforeDestroy 销毁前状态

  },
  destroyed() {//destroyed 销毁完成状态

  }
}
</script>
<style lang="less">
  ._wz_screeningPlanDetails{
    table {
      border-top: 1px solid #515a6e;
      border-left: 1px solid #515a6e;
      width: 100%;

      td {
        min-width: 0;
        height: 40px;
        box-sizing: border-box;
        text-align: left;
        text-overflow: ellipsis;
        border-right: 1px solid #515a6e;
        border-bottom: 1px solid #515a6e;
        padding-left: 18px;
        padding-right: 18px;
      }
    }
  }
</style>
